<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Title</title>
        <link rel="stylesheet" href="./css/bootstrap.css" />
        <link rel="stylesheet" href="./css/index.css" />
    </head>

    <body>
        <div id="app">
            <div>
                <header class="site-header jumbotron">
                    <div class="container">
                        <div class="row">
                            <div class="col-xs-12">
                                <h1>请发表对Vue的评论</h1>
                            </div>
                        </div>
                    </div>
                </header>
                <div class="container">
                    <!-- 左边 -->
                    <div class="col-md-4">
                        <form class="form-horizontal">
                            <div class="form-group">
                                <label>用户名</label>
                                <input
                                    type="text"
                                    class="form-control"
                                    placeholder="用户名"
                                />
                            </div>
                            <div class="form-group">
                                <label>评论内容</label>
                                <textarea
                                    class="form-control"
                                    rows="6"
                                    placeholder="评论内容"
                                ></textarea>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-offset-2 col-sm-10">
                                    <button
                                        type="button"
                                        class="btn btn-default pull-right"
                                    >
                                        提交
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                    <!-- 右边 -->
                    <div class="col-md-8">
                        <h3 class="reply">评论回复：</h3>
                        <h2 style="display: none">
                            暂无评论，点击左侧添加评论！！！
                        </h2>
                        <ul class="list-group">
                            <li class="list-group-item">
                                <div class="handle">
                                    <a href="javascript:;">删除</a>
                                </div>
                                <p class="user">
                                    <span>xxx</span><span>说:</span>
                                </p>
                                <p class="centence">Vue不错!</p>
                            </li>
                            <li class="list-group-item">
                                <div class="handle">
                                    <a href="javascript:;">删除</a>
                                </div>
                                <p class="user">
                                    <span>yyy</span><span>说:</span>
                                </p>
                                <p class="centence">Vue有点难!</p>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>
